<template>
  <div class="carbox">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="nr">
      <div class="itembox">
        <div style="width:100%;height:1px;"></div>

        <div class="item">
          <van-swipe-cell v-for="(item,index) in list" :key="index" :before-close="beforeClose">
            <div class="itemitem">
              <img
                @click="isselect(index)"
                v-if="item.isselect==true"
                src="../../assets/img/duigou.png"
                alt
              />
              <div @click="isselect(index)" v-if="item.isselect==false" class="noselecrbox"></div>

              <!-- <div class="img"></div> -->
              <img class="img" :src="item.goods_thumb" alt />

              <div class="allthing">
                <div class="goodsname">{{item.goods_name}}</div>
                <div class="guige" v-if='item.goods_attr!=""' >{{item.goods_attr}}</div>
                <div class="price">
                  <div class="pricenum">￥{{item.shop_price}}</div>
                  <div class="addbox">
                    <div class="miuse" @click="miusenum(index)">-</div>
                    <div class="goodsnum">{{item.goods_number}}</div>
                    <div class="add" @click="addnum(index)">+</div>
                  </div>
                </div>
              </div>
            </div>

            <template slot="right">
              <!-- <van-button square type="danger" text="删除" /> -->
              <div class="shanchu" @click="delcar(index)">删除</div>
            </template>
          </van-swipe-cell>
        </div>
      </div>
      <div class="tojiesuan">
        <div class="chackedbox" @click="selectall">
          <img v-if="allselect==true" src="../../assets/img/duigou.png" alt />
          <div v-if="allselect==false" class="noselecrbox"></div>
          <div class="zi">全选</div>
        </div>
        <div class="pricebox">
          <div class="zi1"></div>
          <div class="zi2"></div>
          <div class="buttom" @click="tojiesuan">确定需求</div>
        </div>
      </div>
    </div>
    </van-pull-refresh>
    <div class="footer">
      <Footer v-bind:select="select" @activeindex="childerfn"></Footer>
    </div>
  </div>
</template>

<script>
import Footer from "../footer";
export default {
  name: "car",
  data() {
    return {
      // 下拉刷新
      isLoading:false,
      select: 3,
      allselect: false,
      list: "",
      yaodel_iindex: ""
    };
  },
  components: {
    Footer
  },
  methods: {
     onRefresh() {
      setTimeout(() => {
        // Toast('刷新成功');
        this.getlist();
        this.isLoading = false;
      }, 1000);
    },
    selectall() {
      this.allselect = !this.allselect;
      for (const key in this.list) {
        this.list[key].isselect = this.allselect;
      }
    },
    childerfn(index) {
      this.select = index;
    },
    beforeClose({ position, instance }) {
      // console.log(cart_id)
      switch (position) {
        case "left":
        case "cell":
        case "outside":
          instance.close();
          break;
        case "right":
          this.$dialog
            .confirm({
              message: "确定删除吗？"
            })
            .then(() => {
              console.log("queding");
              console.log(this.yaodel_iindex);
              this.deicarfun(this.yaodel_iindex, "");
              instance.close();
            });
          break;
      }
    },
    miusenum(index) {
      if (this.list[index].goods_number == 1) {
        this.$dialog
          .confirm({
            message: "确定删除吗？"
          })
          .then(() => {
            this.deicarfun(index, '');
            // instance.close();
          });
      } else {
        this.list[index].goods_number =
          Number(this.list[index].goods_number) - 1;
        this.deicarfun(index, "1");
      }
    },

    // 立即购买
    addcarfun(index) {
      this.$axios({
        method: "post",
        url: "api/gzh_order.php",
        data: this.$qs.stringify({
          action: "cart_add",
          goods_id: this.list[index].goods_id,
          number: 1,
          uid: localStorage.getItem("uid"),
          attr_id: this.list[index].goods_attr_id
        }),
        headers: {
          // 'Content-Type': 'application/x-www-form-urlencoded'
          // 'content-Type' : 'application/json'
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(res => {
        if (res.data.error == 0) {
          console.log("添加成功");
        }
      });
    },
    addnum(index) {
      this.list[index].goods_number = Number(this.list[index].goods_number) + 1;
      this.addcarfun(index);
    },

    delcar(index) {
      this.yaodel_iindex = index;
    },

    deicarfun(index, num) {
      console.log(index,'index');
      console.log(num,'num');
      var cart_id = this.list[index].cart_id;
      // cart_arr[0]=100
      // var obj = [];
      // obj[cart_id + ""] = (num == "" ? this.list[index].goods_number : "1");
      // console.log(obj,'obj')
      // console.log(typeof obj,'obj')
      // JSON.stringify(obj);
      this.$get("api/gzh_order.php?action=cart_del&cart_arr["+cart_id+"]="+(num == "" ? this.list[index].goods_number : "1"), {
        uid: localStorage.getItem("uid"),
      })
        .then(res => {
          // console.log(res.data,'res')
          if (res.error == 0) {
            this.getlist();
          }
        })
        .catch(err => {});
    },

    isselect(index) {
      this.list[index].isselect = !this.list[index].isselect;
      for (const key in this.list) {
        if (this.list[key].isselect == false) {
          this.allselect = false;
          return;
        }
      }
      this.allselect = true;
    },
    getlist() {
      this.$get("api/gzh_order.php?action=card_list", {
        uid: localStorage.getItem("uid")
      })
        .then(res => {
          console.log(res.data, "res");
          for (const key in res.data.list) {
            res.data.list[key].isselect = false;
          }
          this.list = res.data.list;
        })
        .catch(err => {});
    },
    tojiesuan() {
      var cart_id = [];
      for (const key in this.list) {
        if (this.list[key].isselect == true) {
          cart_id.push(this.list[key].cart_id);
        }
      }
      console.log(cart_id);
      if (cart_id.length == 0) {
        this.$toast("请选择去结算商品");
      } else {
        this.$router.push({ path: "/gojiesuan", query: { cart_id: cart_id } });
      }
    }
  },
  mounted() {
    this.$islogin();
    this.getlist();
  }
};
</script>

<style scoped>
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.carbox {
  width: 100%;
  height: 100%;
}
.nr {
  height: calc(100% - 92px);
  background-color: #efefef;
  position: relative;
}
.tojiesuan {
  width: 100%;
  height: 90px;
  border-bottom: 1px solid #cacaca;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}
.itembox {
  height: calc(100% - 90px);
  overflow: hidden;
  overflow-y: scroll;
}
.chackedbox {
  width: 200px;
  display: flex;
  align-items: center;
}
.chackedbox img {
  width: 28px;
  height: 28px;
  margin: 0 16px;
}
.chackedbox .zi {
  font-size: 28px;
  color: #666;
  /* margin: 0 16px; */
}
.noselecrbox {
  width: 28px;
  height: 28px;
  border: 1px solid #666;
  border-radius: 50%;
  margin: 0 16px;
  box-sizing: border-box;
}
.pricebox {
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pricebox .zi1 {
  font-size: 24px;
  color: #999;
}
.pricebox .zi2 {
  font-size: 24px;
  color: #fe4a4d;
}
.buttom {
  width: 218px;
  height: 90px;
  background-color: #fe4a4d;

  font-size: 32px;
  color: #fff;
  line-height: 90px;
  text-align: center;
}
.item {
  margin-top: 10px;
  border-radius: 10px 0;
  background-color: #fff;
}
.itemtop {
  width: 100%;
  height: 100px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.itemtopleft {
  display: flex;
  align-items: center;
}
.itemtopleft img {
  width: 28px;
  height: 28px;
  margin: 0 16px;
}
.itemtopleft .noselecrbox {
  width: 28px;
  height: 28px;
  border: 1px solid #666;
  border-radius: 50%;
  margin: 0 16px;
}
.itemtopleft .zi {
  font-size: 34px;
  color: #333;
  /* margin: 0 16px; */
}

.tocoudan {
  font-size: 28px;
  color: #333;
  display: flex;
  width: 45%;
  justify-content: space-around;
  align-items: center;
}
.tocoudan .zi2 {
  color: #faadb6;
}
.tocoudan .jinggao {
  width: 28px;
  height: 28px;
}
.tocoudan .gd {
  width: 12px;
  height: 22px;
  margin-right: 16px;
}
.itemitem {
  width: 100%;
  height: 200px;
}
.itemitem {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.itemitem img {
  width: 28px;
  height: 28px;
  margin: 0 16px;
}
.itemitem .noselecrbox {
  width: 28px;
  height: 28px;
  border: 1px solid #666;
  border-radius: 50%;
  margin: 0 16px;
}
.itemitem .img {
  width: 120px;
  height: 120px;
  background-color: #999;
  margin-right: 32px;
}
.allthing {
  height: 90%;
  width: 70%;
  display: flex;
  flex-direction: column;
}
.allthing .goodsname {
  font-size: 33px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 80%;
}
.allthing .guige {
  font-size: 28px;
  color: #9b9b9b;
}

.allthing .price {
  margin-top: 52px;
  display: flex;
  justify-content: space-between;
}

.allthing .price .pricenum {
  font-size: 36px;
  color: #fe4a4d;
}
.addbox {
  display: flex;
  font-size: 30px;
}

.addbox .add,
.addbox .miuse {
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 44px;
}
.addbox .goodsnum {
  text-align: center;
  line-height: 44px;
  width: 66px;
  height: 44px;
  background-color: #f0f0f0;
}
</style>



<style>
.van-swipe-cell__right .shanchu {
  width: 100px;
  height: 100%;
  background-color: red;
  line-height: 200px;
  font-size: 30px;
  color: #fff;
  text-align: center;
}

/* .van-toast {
  width: 80vw;
  height: 100px;
  font-size: 28px;
}
.van-toast--html,
 .van-toast--text {
  width: 80vw;
  height: 100px;
  font-size: 28px;
} */

.van-dialog {
  position: fixed;
  top: 45%;
  left: 50%;
  width: 640px!important;
  overflow: hidden;
  font-size: 32px!important;
  background-color: #fff;
  border-radius: 32px!important;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}
@media (max-width: 321px) {
  .van-dialog {
    width: 90%;
  }
}
.van-dialog__header {
  padding-top: 48px!important;
  font-weight: 500;
  line-height: 48px!important;
  text-align: center;
}
.van-dialog__header--isolated {
  padding: 48px 0!important;
}
.van-dialog__message {
  max-height: 60vh;
  padding: 48px!important;
  overflow-y: auto;
  font-size: 28px!important;
  line-height: 40px!important;
  white-space: pre-wrap;
  text-align: center;
  word-wrap: break-word;
  -webkit-overflow-scrolling: touch;
}

.van-dialog__footer {
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
.van-dialog__footer--buttons {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.van-dialog__footer--buttons .van-button {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.van-dialog .van-button {
  border: 0;
}
.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #1989fa;
}
.van-dialog-bounce-enter {
  -webkit-transform: translate3d(-50%, -50%, 0) scale(0.7);
  transform: translate3d(-50%, -50%, 0) scale(0.7);
  opacity: 0;
}

.van-button--large{
  width:100%;
  height:100px!important;
  line-height:96px!important
  }
  .van-pull-refresh{
    height: 100%;
  }
  .van-pull-refresh__track{
    height: 100%;
  }
</style>